<!-- # CE - camunda-commons-ui/lib/widgets/variables-table/test/fancy-modal.html -->
<div class="modal-header">
  <h3>Inspect "{{ variable.name }}" variable</h3>
</div>

<div class="modal-body">
  <div class="row"
       ng-if="readonly">
    <div class="col-xs-8">
      <p>
        Object type name:<br />
        <code>{{ variable.valueInfo.objectTypeName }}</code>
      </p>

      <p>
        Serialization Data Format:<br />
        <code>{{ variable.valueInfo.serializationDataFormat }}</code>
      </p>
    </div>

    <div class="col-xs-4">
      <img class="img-responsive"
           src="" />
      <i>Cuteness has a posse</i>
    </div>
  </div>

  <div ng-if="!readonly"
       style="margin-top: 3em">
    <div class="form-group">
      <label for="object-type-name">Object type name</label>
      <input type="text"
             id="object-type-name"
             class="form-control"
             ng-model="variable.valueInfo.objectTypeName" />
    </div>

    <div class="form-group">
      <label for="serialization-data-format">Serialization data format</label>
      <input type="text"
             id="serialization-data-format"
             class="form-control"
             ng-model="variable.valueInfo.serializationDataFormat" />
    </div>
  </div>

  <div class="form-group">
    <label for="serialized-value">Serialized value</label>
    <textarea ng-model="variable.value"
              id="serialized-value"
              rows="10"
              class="form-control"
              ng-disabled="readonly"></textarea>
  </div>
</div>

<div class="modal-footer">
  <button class="btn btn-default"
          ng-click="$dismiss('close')">
    Close
  </button>

  <button class="btn btn-primary"
          ng-if="!readonly"
          ng-disabled="!hasChanged('serialized')"
          ng-click="$close(variable)">
    Change
  </button>
</div>
<!-- / CE - camunda-commons-ui/lib/widgets/variables-table/test/fancy-modal.html -->
